<template>
  <ContainerGroup>
    <Container>
      <div class="ck-filter-form" :style="{ height: conHeight }">
        <div ref="input-container" class="form-item-container">
          <div class="form-item">
            <span class="form-item-label">床位类型：</span>
            <el-select
              v-model="bedsType"
              placeholder="请选择"
              size="mini"
              style="width: 180px"
              filterable
              clearable
              @change="typeChange"
            >
              <el-option
                v-for="item in bedsTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
      </div>
    </Container>
    <Container height="fill" style="padding: 0px; overflow: hidden">
      <div v-loading="warploading" class="main-wrap" style="display: flex; height: 100%; overflow-y: hidden">
        <!-- <Empty v-if="bedsListPer.length === 0" style="margin: 20px auto" /> -->
        <!-- <div
          v-for="(item, index) in bedsListPer"
          :key="index"
          class="content-collection"
          :style="maxHeight"
        >-->
        <!-- 病区 -->
        <div v-if="nurseCellName" class="left">{{ nurseCellName }} {{ `（${deptName}）` }}</div>
        <!-- 病房 -->
        <div ref="heightdepartment" class="department-box">
          <div v-for="item in bedsListPer" :key="item.name" class="ment">
            <!-- :style="'width:' + (index1 * 110 + (index1 - 1) * 10) + 'px'" -->
            <div class="ment-box">
              <div
                v-for="(item1, index2) in item.children"
                :key="index2"
                :class="`ment-position ${item1.className} ${item1.sexColor}`"
                @click="getData(item1)"
                @contextmenu.prevent="rightClick($event, item1)"
              >
                <div :class="item1.changeType === '明日出院' ? 'up-left-triangle' : (item1.changeType === '今日出院' ? 'date-triangle' : 'no-w')">
                  <span style="font-size: 20px;margin-left: -9px;">{{ item1.changeType === '明日出院' ? '明' : (item1.changeType === '今日出院' ? '今' : '') }}</span>
                </div>
                <div class="room-status">
                  <img v-if="item1.spFlag === 1" src="../../assets/image/C.png" alt="" style="width: 12px; height: 12px;margin-right: 10px;">
                  <img
                    v-if="item1.isHisConfirm === '1'"
                    src="../../assets/image/time-icon.png"
                    class="status-img"
                    alt
                    style="width: 12px; height: 12px"
                  >
                  <img
                    v-if="item1.occupationState === '0'"
                    src="../../assets/image/occupationState-logo.png"
                    class="status-img"
                    alt
                  >
                  <img
                    v-if="item1.ifGy === '1'"
                    src="../../assets/image/red-flone.png"
                    class="status-img"
                    alt
                    style="width: 10px; height: 14px"
                  >
                </div>
                <div class="room-num">{{ item1.name }}</div>
                <div v-if="item1.patinetName" class="ment-name">{{ item1.patinetName }}</div>
                <div v-if="item1.ylzzName" class="medical-name">医生组长：{{ item1.ylzzName }}</div>
                <!-- <button @click="getNothing(item,item1)">get</button> -->
                <!-- <div
                  v-if="item1.occupationState === '0'"
                  class="ment-name"
                >{{ item1.occupationBed.patientName }}</div> -->
                <div
                  v-if="item1.bedState === 'b' && item1.sexColor === 'three-div' && item1.occupationState !== '0'"
                  class="ment-name"
                >
                  <img src="../../assets/image/eeeeeee.png" class="bed-img" alt>
                </div>
                <div
                  v-if="item1.bedState === 'b' && item1.sexColor !== 'three-div' && item1.occupationState !== '0'"
                  class="ment-name"
                >
                  <img src="../../assets/image/ffffff.png" class="bed-img" alt>
                </div>
              </div>
            </div>
            <div class="house-num">{{ item.roomNum }}</div>
            <!-- </div> -->
          </div>
        </div>
        <!-- 患者信息 -->
        <div v-if="inforAlldata" class="right-patients">
          <p class="view-patients">
            <span>患者信息</span>
            <span v-if="allFlbox">
              <el-checkbox v-model="sexchecked" @change="changeSexChe">全部</el-checkbox>
            </span>
            <span
              v-if="occupationState"
              style="color: #217dfa; cursor: pointer"
              @click="handlePatient"
            >查看详情>></span>
          </p>
          <Empty v-if="bedsListPer.length === 0" style="margin: 20px auto" />
          <div v-loading="mentloading" style="width: 100%; height: 95%">
            <template v-if="occupationState">
              <div v-if="avsB" class="neir-patients">
                <div
                  v-for="(item, index) in allperpro"
                  :key="index"
                  class="informationbox"
                  @click="onClassner(item, index)"
                >
                  <div style="margin-bottom: 13px">
                    <span style="font-size: 18px; color: #555555; margin-right: 7px">{{ item.name }}</span>
                    <span class="seximg">
                      <img v-if="item.sex === '1'" src="../../assets/image/man.png" alt>
                      <img v-if="item.sex === '2'" src="../../assets/image/woman.png" alt>
                    </span>
                    <span style="margin-right: 7px; color: #666666">{{ item.age }}岁</span>
                    <span v-if="item.consultationCode === '6'" class="emergency-treatment">急诊</span>
                    <span v-if="item.consultationCode !== '6'" class="outpatient-department">门诊</span>
                    <span v-if="item.preState === '4'" class="stayinbed-name">待床</span>
                    <span v-if="item.patientTag === '2'" class="youxian">院前</span>
                  </div>
                  <div style="color: #666666">
                    <span style="margin-right: 7px">科室:</span>
                    <span>{{ item.deptName }}</span>
                  </div>
                  <div style="color: #666666">
                    <span style="margin-right: 7px">入院诊断:</span>
                    <span>{{ item.diagName }}</span>
                    <span />
                  </div>
                  <div
                    style="
                    color: #666666;
                    margin-right: 10px;
                    vertical-align: top;
                    clear: both;
                  "
                  >
                    <span style="margin-right: 7px">预约时间:</span>
                    <span>{{ item.predate }}</span>
                  </div>
                  <div>
                    <span class="register" @click="openReg(item)">
                      <img style="margin-right: 7px" src="../../assets/image/addperpro.png" alt>
                      预约
                    </span>
                  </div>
                  <!-- surebtn1 -->
                  <span :class="item.bigDiv">
                    <div :class="item.radioModel" />
                  </span>
                </div>
              </div>
              <div v-else v-loading="mentloading" class="neir-patients">
                <div class="patients-content" style="margin-bottom: 9px">
                  <p>病人姓名：{{ patientmessageList.name }}</p>
                  <p>性别：{{ patientmessageList.sex === "1" ? "男" : "女" }}</p>
                  <p>出生日期：{{ patientmessageList.birthday }}</p>
                  <p>电话：{{ patientmessageList.homeTel }}</p>
                </div>
                <p class="view-patients">
                  <span>住院信息</span>
                </p>
                <div class="patients-content" style="margin-bottom: 9px">
                  <p>住院科室：{{ patientmessageList.sdeptName }}</p>
                  <p>病区：{{ patientmessageList.nurseCellName }}</p>
                  <p>床号：{{ patientmessageList.bedNo }}</p>
                  <p>入院诊断：{{ patientmessageList.diagName }}</p>
                  <p>收治医师：{{ patientmessageList.dutyNurseName }}</p>
                  <p>
                    是否日间手术：{{
                      patientmessageList.ynRjsx === "0" ? "否" : "是"
                    }}
                  </p>
                  <p>入院情况：{{ patientmessageList.inCircs }}</p>
                  <p>出院医嘱：{{ patientmessageList.changeType }}</p>
                  <p>院前准备：有</p>
                  <p>是否31日内非计划再次入院：无</p>
                  <p>是否外伤入院：是</p>
                  <p>预交住院费：{{ patientmessageList.balancePrepay }}元</p>
                  <p>入院方式：{{ patientmessageList.inAvenue }}</p>
                  <p>工号：{{ patientmessageList.operCode }}</p>
                  <p>操作时间：{{ patientmessageList.operDtime }}</p>
                  <p>备注：无</p>
                </div>
              </div>
              <el-pagination
                v-if="avsB && total > 0"
                background
                layout="prev, pager, next"
                small
                :pager-count="5"
                :total="total"
                :current-page="pageInfo.pageNum"
                :limit.sync="pageInfo.pageSize"
                hide-on-single-page
                @current-change="sizeChange"
              />
              <!-- :page.sync="pageInfo.pageNum" -->
            </template>
            <template v-else>
              <div v-loading="mentloading" class="neir-patients">
                <div class="patients-content" style="margin-bottom: 9px">
                  <p>患者姓名：{{ occupationBed.patientName }}</p>
                  <p>患者身份证：{{ occupationBed.patientIdnno }}</p>
                  <p>床号：{{ occupationBed.bedNo }}</p>
                  <p>患者手机号码：{{ occupationBed.patientPhone }}</p>
                  <p>占床医生名字：{{ occupationBed.subscribeDoctName }}</p>
                  <p>创建者名称：{{ occupationBed.operName }}</p>
                  <p>创建时间：{{ occupationBed.createTime }}</p>
                  <p>备注：{{ occupationBed.remarks }}</p>
                </div>
              </div>
            </template>
            <div v-if="avsB === false && nodata === true" class="no-craatperpro">请选择集中空床!</div>
          </div>
        </div>
      </div>
    </Container>
    <div v-show="menuVisible">
      <ul v-if="usedBed === true" id="menu" class="menu" @mouseover="onleitve">
        <li class="menu__item" style="margin-top: 3px" @click="usedBedBtn">占床</li>
        <li class="menu__item" @click="btn1">取消</li>
      </ul>
      <template v-else>
        <ul v-if="userBed === true" id="menu" class="menu" @mouseover="onleitve">
          <li class="menu__item" style="margin-top: 3px" @click="occupationbtn">取消占床</li>
          <li class="menu__item" @click="btn1">取消</li>
        </ul>
        <div v-if="userBed === false">
          <ul v-if="rightClibox === true" id="menu" class="menu" @mouseover="onleitve">
            <li class="menu__item" style="margin-top: 3px" @click="btn">转床</li>
            <li class="menu__item" @click="btn1">取消</li>
          </ul>
          <ul v-if="rightClibox === false" id="menu" class="menu">
            <li class="menu__item1" style="margin-top: 3px">转床</li>
            <li class="menu__item1">取消</li>
          </ul>
        </div>
      </template>
    </div>
    <!-- 抽屉 -->
    <Drawer
      title="查看患者"
      :visible="drawerAlreadyVisible"
      width="40%"
      :footer-btns="[
        {
          text: '返回',
          type: 'info',
          trigger: 'cancel',
        },
      ]"
      @cancel="handleClose"
      @confirm="drawConfirm"
    >
      <div class="drawer-box">
        <p>患者信息</p>
        <div class="box-information" :style="{ height: containerHeight }">
          <div ref="notbox" class="basic-box">
            <div>
              病人姓名：{{
                patientmessageList.name === null ? "-" : patientmessageList.name
              }}
            </div>
            <div>
              性别：{{
                patientmessageList.sex === null
                  ? "-"
                  : patientmessageList.sex === "1"
                    ? "男"
                    : "女"
              }}
            </div>
            <div>
              出生年月：{{
                patientmessageList.birthday === null
                  ? "-"
                  : patientmessageList.birthday
              }}
            </div>
            <div>
              结算类型：{{
                patientmessageList.pacttype === null
                  ? "-"
                  : patientmessageList.pacttype
              }}
            </div>
            <div>身高体重：-</div>
            <div>过敏史：-</div>
            <div>生理指标：-</div>
            <div>挂号类型：-</div>
            <div>
              婚姻情况*：{{
                patientmessageList.marrystate === null
                  ? "-"
                  : patientmessageList.marrystate
              }}
            </div>
            <div>
              身份证：{{
                patientmessageList.idenno === null
                  ? "-"
                  : patientmessageList.idenno
              }}
            </div>
            <div>
              职业：{{
                patientmessageList.profession === null
                  ? "-"
                  : patientmessageList.profession
              }}
            </div>
            <div>
              国籍：{{
                patientmessageList.country === null
                  ? "-"
                  : patientmessageList.country
              }}
            </div>
            <!-- <div>
                籍贯：{{
                  patientmessageList.dist === null
                    ? "-"
                    : patientmessageList.dist
                }}
            </div>-->
            <div>
              现地址：{{
                patientmessageList.home === null ? "-" : patientmessageList.home
              }}
            </div>
            <div>
              联系电话：{{
                patientmessageList.homeTel === null
                  ? "-"
                  : patientmessageList.homeTel
              }}
            </div>
            <div>
              工作单位：{{
                patientmessageList.workName === null
                  ? "-"
                  : patientmessageList.workName
              }}
            </div>
            <div>
              联系人：{{
                patientmessageList.linkmaName === null
                  ? "-"
                  : patientmessageList.linkmaName
              }}
            </div>
            <div>
              与联系人关系：{{
                patientmessageList.relative === null
                  ? "-"
                  : patientmessageList.relative
              }}
            </div>
            <div>
              联系人电话：{{
                patientmessageList.linkmanTel === null
                  ? "-"
                  : patientmessageList.linkmanTel
              }}
            </div>
            <div>
              联系人地址：{{
                patientmessageList.linkmanAdd === null
                  ? "-"
                  : patientmessageList.linkmanAdd
              }}
            </div>
          </div>
          <span
            v-show="showCloseAndOpen"
            class="more-text"
            @click="openAndCloseFilterForm"
          >{{ openOrCloseText }}</span>
        </div>
        <p>住院信息</p>
        <div class="box-information" :style="{ height: hospitalizationHeight }">
          <div ref="nothospitalization" class="basic-box">
            <div>
              住院科室：{{
                patientmessageList.deptName === null
                  ? "-"
                  : patientmessageList.deptName
              }}
            </div>
            <div>
              病区：{{
                patientmessageList.nurseCellName === null
                  ? "-"
                  : patientmessageList.nurseCellName
              }}
            </div>
            <div>
              床号：{{
                patientmessageList.bedNo === null
                  ? "-"
                  : patientmessageList.bedNo
              }}
            </div>
            <div>
              预约时间：{{
                patientmessageList.predate === null
                  ? "-"
                  : patientmessageList.predate
              }}
            </div>
            <div>
              收治医生：{{
                patientmessageList.doctName === null
                  ? "-"
                  : patientmessageList.doctName
              }}
            </div>
            <div>
              入院诊断：{{
                patientmessageList.diagName === null
                  ? "-"
                  : patientmessageList.diagName
              }}
            </div>
            <div>
              是否日间手术：{{
                patientmessageList.ifRjbf === null
                  ? "-"
                  : patientmessageList.ifRjbf === "0"
                    ? "否"
                    : "是"
              }}
            </div>
            <div>
              入院情况：{{
                patientmessageList.mszd === null ? "-" : patientmessageList.mszd
              }}
            </div>
            <!-- <div>院前准备：-</div> -->
            <div>
              是否31日内非计划再次入院：{{
                patientmessageList.ifInhosPlan === null
                  ? "-"
                  : patientmessageList.ifInhosPlan
              }}
            </div>
            <div>
              是否外伤入院：{{
                patientmessageList.ifInhosExternal === null
                  ? "-"
                  : patientmessageList.ifInhosExternal
              }}
            </div>
            <div>
              需预交住院费：{{
                patientmessageList.prepayCost === null
                  ? "-"
                  : patientmessageList.prepayCost
              }}
            </div>
            <div>入院方式：{{ _ryfs(patientmessageList) }}</div>
            <div>
              工号：{{
                patientmessageList.operCode === null
                  ? "-"
                  : patientmessageList.operCode
              }}
            </div>
            <div>
              操作时间：{{
                patientmessageList.operDtime === null
                  ? "-"
                  : patientmessageList.operDtime
              }}
            </div>
            <div>
              备注：{{
                patientmessageList.beizhu === null
                  ? "-"
                  : patientmessageList.beizhu
              }}
            </div>
          </div>
          <span
            v-show="hospitalizationOpen"
            class="more-text"
            @click="openHospitalization"
          >{{ hospitalizationText }}</span>
        </div>
      </div>
    </Drawer>
    <!-- 弹出框 -- 转床 -->
    <el-dialog title="选择转床信息" :visible.sync="rotatingBed" width="50%" :before-close="tcHandleClose">
      <div>
        <div class="form-item-container">
          <!-- 科室 -->
          <div class="form-item" style="display: inline-block; margin-right: 10px">
            <span class="form-item-label">院区：</span>
            <span>
              <el-select
                v-model="region"
                placeholder="请选择院区"
                @change="changeHospital"
              >
                <el-option
                  v-for="item in regionoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <!-- 科室 -->
          <div class="form-item" style="display: inline-block; margin-right: 10px">
            <span class="form-item-label">科室：</span>
            <span>
              <el-select v-model="deptValue" placeholder="请选择" filterable clearable>
                <el-option
                  v-for="item in deptBox"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <!-- 病区 -->
          <div class="form-item" style="display: inline-block; margin-right: 10px">
            <span class="form-item-label">病区：</span>
            <span>
              <el-select
                v-model="areaValue"
                placeholder="请选择"
                filterable
                clearable
                @change="getOrbed"
              >
                <el-option
                  v-for="item in areaBox"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
          <!-- 床位 -->
          <div class="form-item" style="display: inline-block; margin-right: 10px">
            <span class="form-item-label">床位号：</span>
            <span>
              <el-select v-model="bedValue" placeholder="请选择" filterable clearable>
                <el-option
                  v-for="item in bedBox"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
        </div>
        <div class="form-item-container" />
        <div class="form-item-container" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tcHandleClose">取 消</el-button>
        <el-button type="primary" @click="changeBed">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看更多用户 -->
    <el-drawer
      :visible.sync="drawerloding"
      :direction="direction"
      :with-header="false"
      size="50%"
      :before-close="deawerhandleClose"
      @changeDrawer="deawerhandleClose"
    >
      <div class="drawer-warp">
        <second :district-code-list="yuanId" :bed-data="bedOrdet" />
      </div>
    </el-drawer>

    <!-- 占床 -->
    <Drawer
      title="占床"
      :visible="ManualInputVisible"
      width="40%"
      :footer-btns="[
        {
          text: '确定',
          type: 'primary',
          trigger: 'confirm',
        },
        {
          text: '取消',
          type: 'info',
          trigger: 'cancel',
        },
      ]"
      @cancel="resetForm"
      @confirm="submitForm('bedForm')"
    >
      <div class="drawer-box">
        <el-form
          ref="bedForm"
          :model="bedForm"
          :rules="bedrules"
          label-position="right"
          class="demo-ruleForm"
          label-width="100px"
        >
          <div class="formitem">
            <el-form-item label="患者姓名" prop="patientName">
              <el-input v-model="bedForm.patientName" size="mini" style="width: 180px" />
            </el-form-item>
            <el-form-item label="患者身份证" prop="patientIdnno">
              <el-input v-model="bedForm.patientIdnno" size="mini" style="width: 180px" />
            </el-form-item>
          </div>
          <div class="formitem">
            <el-form-item label="患者电话" prop="patientPhone">
              <el-input v-model="bedForm.patientPhone" size="mini" style="width: 180px" />
            </el-form-item>
            <el-form-item label="创建者名称" prop="operName">
              <el-input v-model="bedForm.operName" size="mini" style="width: 180px" />
            </el-form-item>
          </div>
          <div class="formitem">
            <el-form-item label="创建者工号" prop="operNo">
              <el-input v-model="bedForm.operNo" size="mini" style="width: 180px" />
            </el-form-item>
            <el-form-item label="床号" prop="bedNo">
              <el-input v-model="bedForm.bedNo" size="mini" :disabled="true" style="width: 180px" />
            </el-form-item>
          </div>
          <div class="formitem">
            <el-form-item label="住院科室" prop="deptCode">
              <el-select
                v-model="bedForm.deptCode"
                placeholder="请选择住院科室"
                size="mini"
                style="width: 180px"
                filterable
                clearable
                @change="beddeptChange"
              >
                <el-option
                  v-for="item in hospitalizationSelect.departmentoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="病区" prop="nurseCellCode">
              <el-select
                v-model="bedForm.nurseCellCode"
                placeholder="请选择病区"
                size="mini"
                style="width: 180px"
                filterable
                clearable
              >
                <el-option
                  v-for="item in hospitalizationSelect.inpatientAreaoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="formitem">
            <el-form-item label="占床医生" prop="subscribeDoctCode">
              <el-select
                v-model="bedForm.subscribeDoctCode"
                placeholder="请选择占床医生"
                size="mini"
                style="width: 180px"
                :filterable="true"
                :remote="true"
                :remote-method="remoteMethod"
                clearable
              >
                <el-option
                  v-for="item in hospitalizationSelect.predoctCodeoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="bedForm.remarks" size="mini" />
          </el-form-item>
        </el-form>
      </div>
    </Drawer>
  </ContainerGroup>
</template>
<script>
import Container from '../../components/Container.vue'
import second from './second.vue'
import {
  // getEemptyBedsDetails,
  getReservationDetail,
  // getEemptyPatientList,
  getEemptyPatientListNew,
  getWardList,
  getDeptList,
  getEemptyBedsDetailsinfo,
  // getEemptyBeds,
  changePatientBed,
  getEemptysByPatien,
  addPatientBed,
  getBedByNurseCellCode,
  getPatientAreaDTO,
  unUsedOccupationBed,
  getDoctList,
  insertOccupationBed
} from '../../utils/apis/registrationApi'
// import OperationContainer from "../../components/OperationContainer.vue";
export default {
  name: 'RegiStrationfilst',
  components: { Container, second },
  data() {
    return {
      bedsType: '',
      bedsTypes: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '集中',
          value: '1'
        },
        {
          label: '非集中',
          value: '0'
        }
      ],
      bedForm: {
        bedNo: '', // 床号
        deptCode: '', // 科室编码
        deptName: '', // 科室名称
        nurseCellCode: '', // 病区编码
        nurseCellName: '', // 病区名称
        operName: '', // 创建者名称
        operNo: '', // 创建者工号
        patientIdnno: '', // 患者身份证
        patientName: '', // 患者姓名
        patientPhone: '', // 患者手机号码
        remarks: '', // 备注
        subscribeDoctCode: '', // 占床医生编码
        subscribeDoctName: '' // 占床医生名字
      },
      bedrules: {
        bedNo: [{ required: true, message: '请填写床号', trigger: 'blur' }],
        deptCode: [
          { required: true, message: '请选择科室', trigger: 'change' }
        ],
        nurseCellCode: [
          { required: true, message: '请选择病区', trigger: 'change' }
        ],
        operName: [
          { required: true, message: '请填写创建者名称', trigger: 'blur' }
        ],
        operNo: [
          { required: true, message: '请填写创建者工号', trigger: 'blur' }
        ],
        patientIdnno: [
          { required: true, message: '请填写患者身份证', trigger: 'blur' }
        ],
        patientName: [
          { required: true, message: '请填写患者姓名', trigger: 'blur' }
        ],
        patientPhone: [
          { required: true, message: '请填写患者手机号码', trigger: 'blur' }
        ],
        remarks: [{ required: true, message: '请填写备注', trigger: 'blur' }],
        subscribeDoctCode: [
          { required: true, message: '请选择占床医生', trigger: 'change' }
        ]
      }, // 占床必填非空判断
      hospitalizationSelect: {
        departmentoptions: [],
        inpatientAreaoptions: [],
        predoctCodeoptions: []
      },
      ManualInputVisible: false,
      occupationState: true,
      occupybed: false,
      drawerloding: false,
      userBed: false, // 占床
      usedBed: false,
      direction: 'rtl',
      bedStatus: ['1'], // 床位状态
      radioModel: '',
      avsB: false,
      informationPt: false,
      inforAlldata: false, // 查看信息
      rightClibox: false, // 右键
      rotatingBed: false,
      total: 0,
      pageInfo: {
        pageNum: 1,
        pageSize: 10
      },
      bedListArrloading: false,
      bedList: [], // 床位列表
      bedValue: '',
      areaValue: '',
      deptValue: '',
      allFlbox: false, // 全部选框
      warploading: true,
      mentloading: false,
      bedBox: [], // 床位box
      areaBox: [], // 病区box
      deptBox: [], // 科室 box
      drawerAlreadyVisible: false,
      patientmessageList: {},
      bedType: ['1'], // 床位类型
      hospitalDistrict: ['1'], // 院区
      alldata: [],
      widthStyle: 'width:' + window.screen.width + 'px',
      allRoom: [],
      tableLoading: false,
      maxHeight: '100%',
      allperpro: [],
      containerHeight: '122px', // 患者信息盒子高度
      showCloseAndOpen: false, // 患者信息盒子的状态
      openOrCloseText: '查看全部', // 患者信息查看全部的文本
      hospitalizationHeight: '122px', // 住院信息盒子高度
      hospitalizationOpen: true, // 住院信息盒子的状态
      hospitalizationText: '查看全部', // 住院信息查看全部的文本
      durg: false, // 拖拽
      dialogVisible: false,
      menuVisible: false, // 右键点击
      nodata: false,
      yuanId: '',
      bedNo: '',
      filterElements: [
        {
          key: 'depet',
          type: 'Select',
          label: '科室',
          value: '',
          options: []
        },
        {
          key: 'inpatient',
          type: 'Select',
          label: '病区',
          value: '',
          options: []
        }
      ],
      buttonList: [
        {
          label: '查询',
          type: 'primary',
          icon: 'search',
          handlerClick: this.openMent
        },
        {
          label: '重置',
          type: 'info',
          icon: 'reset',
          handlerClick: this.handlerReset
        }
      ],
      conHeight: '35px',
      showOpen: false,
      openText: '展开',
      tableData: [],
      bedListArr: [], // 全部床位列表
      patientName: '', // 病人姓名
      patientId: '', // 病人id
      bedId: '',
      changeBedbedId: '',
      changeBedpatientId: '', // 病人id
      changeBedpatientName: '', // 病人姓名
      bedloading: false,
      patientloading: false,
      deptCodeR: '',
      ifGy: '',
      sexchecked: false,
      patinetName: null,
      bedOrdet: {}, // 选中床的信息
      patientSex: '',
      form: {
        hospitalArea: {
          sxhospital: true,
          xghospital: true
        },
        department: '全部',
        illnessArea: '全部',
        parms: {},
        bedState: {
          kongbed: true,
          feikongbed: true
        },
        bedType: {
          jzbed: true,
          fjzbed: false
        },
        departmentoptions: [
          {
            label: '全部',
            value: '全部'
          }
        ],
        illnessAreaoptions: [
          {
            label: '全部',
            value: '全部'
          }
        ]
      },
      ruleFormSelect: {
        deptCodeoptions: [],
        nurseCellCodeoptions: []
      },
      ruleForm: {
        deptCode: '',
        nurseCellCode: ''
      },
      bedinfo: '',
      deptNameinfo: '',
      occupationId: '',
      occupybedNo: '',
      occupationBed: {},
      routeParams: {},
      bedsList: [],
      bedsListPer: [],
      nurseCellName: '',
      nurseCellCode: '',
      deptName: '',
      deptCode: '',
      areaName: '',
      currentBed: '',
      yard: '',
      regionoptions: [
        {
          value: '1',
          label: '三香院区'
        },
        {
          value: '2',
          label: '浒关院区'
        }
      ],
      region: '1'
    }
  },
  created() {},
  mounted() {
    this.bedsType = this.$route.query.bedsType
    this.nurseCellName = this.$route.query.areaName
    this.deptName = this.$route.query.deptName
    this.yard = this.$route.query.yard
    console.log(this.bedsType)
    this._routeParams()
    this.getDept()
    this.getWard()
    this.openMent()
    // this.getOrbed()
    this.getmoreAdd()
    this.menuVisible = false
    this.tableLoading = true
    this.yuanId = this.routeParams.districtCodeList
    setTimeout(() => {
      this.tableLoading = false
    }, 1500)
    this.initShowCloseOrOpen()
    window.addEventListener('resize', this.initShowCloseOrOpen)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.initShowCloseOrOpen)
  },
  methods: {
    initShowCloseOrOpen() {
      setTimeout(() => {
        this.showOpen = this.$refs['input-container'].scrollHeight > 35
      }, 50)
    },
    // 院区变化- 请求
    changeHospital() {
      this.getmoreAdd()
    },
    typeChange(val) {
      // 这里发生变化直接调用查询接口
      if (val) {
        this.bedType = val
      } else {
        this.bedType = ''
      }
      this.warploading = true
      this.openMent(val)
    },
    // 获取床位
    openMent(data) {
      this.close = true
      this.widthStyle = 'width:380px;'
      let sfkcID = ''
      if (this.bedStatus[0] === '1') {
        // 空床1
        sfkcID = 'b'
      }
      if (this.bedStatus[0] === '2') {
        // 非空 2
        sfkcID = 'a'
      }
      if (this.bedStatus.length === 2) {
        sfkcID = ''
      }
      console.log(this.routeParams)
      // New
      const params = {
        areaCode: this.routeParams.areaCode,
        bedState: '',
        bedType: data || this.bedType,
        deptCode: this.routeParams.deptCode,
        districtCode: this.routeParams.districtCodeList,
        bedNo: ''
      }
      console.log(params)
      getReservationDetail(params).then(res => {
        if (res.data.code === 200) {
          this.bedsListPer = res.data.data
          // this.initPageData()
          this.warploading = false
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    initPageData() {
      // let index = 0
      for (const i in this.bedsList) {
        const obj = {
          roomNum: i,
          children: this.bedsList[i]
        }
        this.bedsListPer.push(obj)
        // this.bedsListPer[index] = {}
        // this.$set(this.bedsListPer[index], 'roomNum', i)
        // this.$set(this.bedsListPer[index], 'children', this.bedsList[i])
        // this.bedsListPer[index].roomNum = i
        // this.bedsListPer[index].children = this.bedsList[i]
        // index++
      }
      // console.log(this.bedsListPer)
      // this.nurseCellName = this.bedsListPer[0].children[0].nurseCellName
      // this.deptName = this.bedsListPer[0].children[0].deptName
    },
    openForm() {
      this.conHeight = this.openText === '展开' ? 'auto' : '35px'
      this.openText = this.openText === '展开' ? '收起' : '展开'
    },
    _routeParams() {
      const obj = JSON.parse(sessionStorage.pageTabList)
      // console.log(obj)
      const paramss = obj.filter(item => {
        return item.name === '预约详情'
      })
      this.routeParams = paramss[0].params
      // console.log(this.routeParams)
      this.bedType = this.routeParams.bedType[0] // 床位类型
      this.bedStatus = this.routeParams.bedStatus[0]
      this.deptCode = this.routeParams.deptCode
      this.nurseCellCode = this.routeParams.areaCode
    },
    // 床位查询全部查询
    _bedQuery() {
      this.getBedList()
    },
    //  抽屉转床
    drawConfirm() {},
    // 转床
    changeBed() {
      if (this.changeBedpatientName === '' && this.changeBedpatientId === '') {
        this.$message.error('请选择需要转床病人')
        return
      }
      if (this.bedValue === '') {
        this.$message.error('请选择需要转入的床位')
        return
      }
      const bedarr = this.bedValue.split('-')
      const parms = {
        bedId: bedarr[0],
        name: this.changeBedpatientName,
        patientId: this.changeBedpatientId
      }
      const arrdept = this.deptValue.split('-')
      parms.deptName = arrdept[1]
      parms.deptCode = arrdept[0]
      parms.sdeptCode = arrdept[2]
      const arr = this.areaValue.split('-')
      const content = `<div  style="word-break:break-all;width:386px">确定将${this.bedinfo}转至${arrdept[1]}${arr[1]}${bedarr[1]}号床吗?</div>`
      this.$confirm({
        content: content,
        title: '确认信息',
        okFn: res => {
          changePatientBed(parms).then(res => {
            if (res.data.code === 200) {
              this.$message.success('操作成功!')
              this.rotatingBed = false
              this.bedValue = ''
              this.areaValue = ''
              this.openMent()
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        cancelFn: res => {
          this.bedValue = ''
          this.areaValue = ''
        }
      })
    },
    // 获取转床时-床位
    getOrbed() {
      this.bedValue = ''
      this.bedBox = []
      const arr = this.areaValue.split('-')
      getBedByNurseCellCode({ nurseCellCode: arr[0] }).then(res => {
        if (res.data.code === 200) {
          let dats = {
            label: '',
            value: ''
          }
          res.data.data.forEach(element => {
            dats = {
              label: element.name,
              value: element.id + '-' + element.name
            }
            this.bedBox.push(dats)
          })
        }
      })
    },
    // 床位类型变化-请求
    changeBedType() {
      let obj = JSON.parse(sessionStorage.pageTabList)
      obj = obj.map(item => {
        if (item.name === '预约详情') {
          item.params.bedType = this.bedType
        }
        return item
      })
      sessionStorage.pageTabList = JSON.stringify(obj)
      this.openMent()
      //  1 集中   0 非集中
    },
    // 床位状态变化-请求
    changeBedStatus() {
      let obj = JSON.parse(sessionStorage.pageTabList)
      obj = obj.map(item => {
        if (item.name === '预约详情') {
          item.params.bedStatus = this.bedStatus
        }
        return item
      })
      sessionStorage.pageTabList = JSON.stringify(obj)
      //  1 空床   2 非空
      this.openMent()
    },
    // 入院方式
    _ryfs(patientmessageList) {
      if (
        patientmessageList.ifEmergency !== null &&
        patientmessageList.ifEmergency === '1'
      ) {
        return '急'
      } else if (
        patientmessageList.ifWalk !== null &&
        patientmessageList.ifWalk === '1'
      ) {
        return '步行'
      } else if (
        patientmessageList.ifChair !== null &&
        patientmessageList.ifChair === '1'
      ) {
        return '抬车'
      } else if (
        patientmessageList.ifAmbulance !== null &&
        patientmessageList.ifAmbulance === '1'
      ) {
        return '病床'
      } else {
        return '-'
      }
    },
    // 打开登记
    openReg(item) {
      console.log(item)
      console.log(this.bedOrdet)
      const a = /(1052|1804|1051)+/
      if (item.sex === '1' && a.test(this.bedOrdet.deptCode)) {
        this.$message.error('男性病人不可以预约产科或妇科的床位请选择其他床位')
      } else {
        let content = ''
        if (this.bedOrdet.sex !== item.sex && this.bedOrdet.sex !== '3') {
          content =
            '<div style=' +
            'color:#FC9691;text-align:center;margin-bottom:10px;' +
            '>' +
            '当前床位为异性床位' +
            '</div>' +
            '<div style="word-break:break-all;width:386px">' +
            item.name +
            '将分配至' +
            this.nurseCellName +
            this.bedOrdet.deptName +
            this.bedOrdet.name +
            '床,确定此操作吗?' +
            '</div>'
        } else {
          content =
            '<p  style="word-break:break-all;width:386px">' +
            item.name +
            '将分配至' +
            this.nurseCellName +
            this.bedOrdet.deptName +
            this.bedOrdet.name +
            '床,确定此操作吗?' +
            '</p>'
        }
        this.patientName = item.name // 病人姓名
        this.patientId = item.preid
        this.$confirm({
          content: content,
          title: '确认床位预约么',
          okFn: res => {
            const params = {
              bedId: this.bedOrdet.bedNo,
              name: item.name,
              patientId: item.preid
            }
            addPatientBed(params).then(res => {
              if (res.data.code === 200) {
                this.$message.success(res.data.message)
                this.openMent()
                this.getData(this.bedOrdet)
              } else {
                this.$message.error(res.data.message)
              }
            })
          },
          cancelFn: res => {
            console.log('取消')
          }
        })
        this._bedQuery()
      }
    },
    // 床位登记
    handleBed(bedId, ifGy, patinetName) {
      this.bedId = bedId
      this.ifGy = ifGy
      this.patinetName = patinetName
    },
    // 床位登记
    handlebedRegister() {
      if (this.bedId === '') {
        this.$message.error('请选择床位')
      } else if (this.ifGy !== '1') {
        this.$message.error('此床位为非集中床位，请选择有小红旗的空床')
      } else if (this.patinetName !== null) {
        this.$message.error('此床位已有人住，请选择空床')
      } else {
        const params = {
          bedId: this.bedId,
          name: this.patientName,
          patientId: this.patientId
        }
        addPatientBed(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.getBedList()
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    },
    openAndCloseFilterForm() {
      this.containerHeight =
        this.openOrCloseText === '查看全部' ? 'auto' : '120px'
      this.openOrCloseText =
        this.openOrCloseText === '查看全部' ? '收起' : '查看全部'
    },
    openHospitalization() {
      this.hospitalizationHeight =
        this.hospitalizationText === '查看全部' ? 'auto' : '120px'
      this.hospitalizationText =
        this.hospitalizationText === '查看全部' ? '收起' : '查看全部'
    },
    funArr(arr) {
      arr.forEach(item => {
        item.roomAndBedList.forEach((elm, index) => {
          if (elm.length > 6) {
            item.roomAndBedList.splice(index, 1)
          }
        })
      })
      return arr
    },
    // 获取房间
    getBedList() {
      this.bedListArrloading = true
      const bedTypeCodeList = []
      const districtCodeList = []
      let isEmptyCodeList = ''
      if (this.form.bedType.jzbed) {
        bedTypeCodeList.push('1')
      }
      if (this.form.bedType.fjzbed) {
        bedTypeCodeList.push('0')
      }
      if (this.form.hospitalArea.sxhospital) {
        districtCodeList.push('1')
      }
      if (this.form.hospitalArea.xghospital) {
        districtCodeList.push('2')
      }
      if (this.form.bedState.kongbed) {
        isEmptyCodeList = '1'
      }
      if (this.form.bedState.feikongbed) {
        isEmptyCodeList = '2'
      }
      if (!this.form.bedState.feikongbed && !this.form.bedState.kongbed) {
        isEmptyCodeList = '3'
      }
      if (this.form.bedState.feikongbed && this.form.bedState.kongbed) {
        isEmptyCodeList = '3'
      }
      const parms = {
        bedTypeCodeList: bedTypeCodeList,
        districtCodeList: districtCodeList,
        sfkc: isEmptyCodeList,
        name: '三香总院',
        patientSex: this.patientSex // 患者性别-根据患者获取床位用
      }
      if (this.form.illnessArea !== '全部') {
        parms.areaCode = this.form.illnessArea
      }
      if (this.form.department !== '全部') {
        parms.deptCode = this.form.department
      }
      getEemptysByPatien(parms).then(res => {
        if (res.data.code === 200) {
          this.bedListArrloading = false
          this.bedListArr = res.data.data
          this.bedList = this.funArr(res.data.data)
        }
      })
    },
    // 抽屉关闭
    handleClose() {
      this.drawerAlreadyVisible = false
      this.openOrCloseText = '查看全部'
      this.hospitalizationText = '查看全部'
      this.hospitalizationHeight = '120px'
      this.containerHeight = '120px'
    },
    // 弹框关闭
    tcHandleClose() {
      this.rotatingBed = false
      this.bedBox = []
      this.bedValue = ''
      this.areaValue = ''
    },
    // 获取 科室 和  病区 下拉框数据
    getmoreAdd() {
      console.log(this.region)
      this.areaBox = []
      this.deptBox = []
      getWardList({ yard: this.region }).then(res => {
        if (res.data.code === 200) {
          let dats = {
            label: '',
            value: ''
          }
          res.data.data.forEach(element => {
            dats = {
              label: element.deptName,
              value: element.deptCode + '-' + element.deptName
            }
            this.areaBox.push(dats)
          })
        }
      })
      getDeptList({ yard: this.region }).then(res => {
        if (res.data.code === 200) {
          let dats = {
            label: '',
            value: ''
          }
          res.data.data.forEach(element => {
            dats = {
              label: element.deptName,
              value:
                element.deptCode +
                '-' +
                element.deptName +
                '-' +
                element.sdeptCode
            }
            this.deptBox.push(dats)
          })
        }
      })
    },
    // 获取病区下拉数据
    getWard() {
      this.ruleFormSelect.nurseCellCodeoptions = []
      const parms = {
        districtCodeList: ['1', '2']
      }
      getWardList(parms).then(res => {
        if (res.data.code === 200) {
          let dats = {
            label: '',
            value: ''
          }
          res.data.data.forEach(element => {
            dats = {
              label: element.deptName,
              value: element.deptCode
            }
            this.ruleFormSelect.nurseCellCodeoptions.push(dats)
          })
        }
      })
    },
    getNothing(item, item1) {
      // console.log(item)
      console.log(item1)
    },
    // 获取科室下拉数据
    getDept() {
      this.ruleFormSelect.deptCodeoptions = []
      this.hospitalizationSelect.departmentoptions = []
      const parms = {
        districtCodeList: [this.routeParams.districtCodeList]
      }
      getDeptList(parms).then(res => {
        if (res.data.code === 200) {
          let dats = {
            label: '',
            value: ''
          }
          let beddats = {
            label: '',
            value: ''
          }
          res.data.data.forEach(element => {
            dats = {
              label: element.deptName,
              value: element.deptCode
            }
            beddats = {
              label: element.deptName,
              value: element.deptCode + '-' + element.deptName
            }
            this.ruleFormSelect.deptCodeoptions.push(dats)
            this.hospitalizationSelect.departmentoptions.push(beddats)
          })
        }
      })
    },
    // 根据科室查病区
    deptChange() {
      this.ruleFormSelect.nurseCellCodeoptions = []
      getPatientAreaDTO({ deptCode: this.ruleForm.deptCode }).then(res => {
        if (res.data.code === 200) {
          let dats = {
            label: '',
            value: ''
          }
          res.data.data.forEach(element => {
            dats = {
              label: element.areaName,
              value: element.areaId
            }
            this.ruleFormSelect.nurseCellCodeoptions.push(dats)
          })
        }
      })
    },
    // 查询全部人员
    changeSexChe() {
      console.log('all')
      this.pageInfo.pageNum = 1
      const parms = {
        bedId: this.bedOrdet.bedNo,
        sexCode: this.bedOrdet.sex,
        deptCode: this.bedOrdet.deptCode,
        isAll: this.sexchecked,
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
        isFilterYQ: false
      }
      getEemptyPatientListNew(parms).then(res => {
        console.info('getEemptyPatientListNew')
        if (res.data.code === 200) {
          console.log(res)
          this.allperpro = res.data.data.list
          this.total = res.data.data.total
          this.allperpro.forEach(item => {
            item.radioModel = ''
            item.bigDiv = ''
          })
          this.mentloading = false
        }
      })
    },
    // 获取空床全部人员
    sizeChange(data) {
      this.pageInfo.pageNum = data
      this.getData(this.parms, 'page')
    },
    // 点击床位  获取信息 / 未登记人员
    getData(item, ispage) {
      console.log(item)
      this.occupationState = true
      this.parms = item
      this.pageInfo.pageNum = ispage ? this.pageInfo.pageNum : 1
      this.bedsListPer.forEach(pItem => {
        pItem.children.forEach(cItem => {
          this.$set(cItem, 'className', '')
          if (cItem.name === item.name) {
            cItem.className = 'ment-position1'
          } else {
            cItem.className = 'no-ment-position1'
          }
        })
      })
      // item.className = 'ment-positions1'
      // this.allRoom.forEach(item3 => {
      //   item3.roomAndBedList.forEach(item1 => {
      //     item1.forEach(item2 => {
      //       if (item.bedNo === item2.bedNo) {
      //         item2.className = 'ment-position1'
      //       } else {
      //         item2.className = 'no-ment-position1'
      //       }
      //     })
      //   })
      // })
      this.inforAlldata = true
      if (item.patinetName) {
        this.allFlbox = false // 全部按钮 -- 判断
        // 获取当前用户信息
        this.avsB = false
        this.nodata = false
        this.informationPt = true
        const parms = {
          preId: item.inpatientNo,
          isNotChange: item.isNotChange === '0' ? '0' : '1',
          name: item.patinetName
        }
        if (item.isHisConfirm === '1') {
          this.patientmessageList = []
          return
        }
        getEemptyBedsDetailsinfo(parms).then(res => {
          if (res.data.data) {
            this.patientmessageList = res.data.data
            console.log(this.patientmessageList)
            this.mentloading = false
          }
        })
      } else {
        if (item.ifGy !== '1') {
          this.nodata = true
          this.mentloading = false
        } else {
          if (item.occupationState === '0') {
            this.allFlbox = false // 全部按钮 -- 判断
            // 获取当前用户信息
            this.avsB = false
            this.nodata = false
            this.informationPt = true
            this.mentloading = false
            this.occupationState = false
            this.occupationBed = item.occupationBed
          } else {
            this.allFlbox = true // 全部按钮 -- 判断
            this.mentloading = true
            // 获取未分配全部人员
            this.avsB = true
            this.bedid = item.bedNo
            this.informationPt = true
            this.bedOrdet = item
            const parms = {
              bedId: item.bedNo,
              sexCode: item.sex,
              deptCode: item.deptCode,
              isAll: this.sexchecked,
              pageNum: this.pageInfo.pageNum,
              pageSize: this.pageInfo.pageSize,
              isFilterYQ: false
            }
            getEemptyPatientListNew(parms).then(res => {
              console.info('getEemptyPatientListNew')
              if (res.data.code === 200) {
                console.log(res)
                this.allperpro = res.data.data.list
                this.total = res.data.data.total
                console.log(this.total)
                this.allperpro.forEach(item => {
                  item.radioModel = ''
                  item.bigDiv = ''
                })
                this.mentloading = false
              }
            })
          }
        }
      }
    },
    onClassner(item, index) {
      this.allperpro.forEach((ele, i) => {
        if (i === index) {
          ele.radioModel = 'neti-surbtn'
          ele.bigDiv = 'surebtn'
        } else {
          ele.radioModel = 'surbtn-neti'
          ele.bigDiv = 'surebtn1'
        }
      })
    },
    // 鼠标移入
    onleitve() {
      var lis = document.getElementsByTagName('li')
      for (let i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function() {
          this.style.color = '#217DFA'
        }
        lis[i].onmouseout = function() {
          this.style.color = '#555555'
        }
      }
    },
    // 查看详情信息
    handlePatient() {
      if (this.avsB === true) {
        this.drawerAlreadyVisible = false
        this.drawerloding = true
      } else {
        this.drawerAlreadyVisible = true
        this.$nextTick(() => {
          this.showCloseAndOpen = this.$refs.notbox.scrollHeight > 120
          this.hospitalizationOpen =
            this.$refs.nothospitalization.scrollHeight > 120
        })
      }
    },
    //  关闭  查看详情信息
    deawerhandleClose(done) {
      this.drawerloding = false
      this.openMent()
    },
    // 鼠标按下事件  出现悬浮框
    mousedown(MouseEvent) {
      this.durg = true
      var durgbox = document.querySelector('#durgbox')
      durgbox.style.left = MouseEvent.clientX - 67 + 'px'
      durgbox.style.top = MouseEvent.clientY - 22 + 'px'
    },
    // 鼠标抬起事件取消 悬浮框
    mouseup() {
      this.durg = false
    },
    drag() {},
    btn() {
      this.rotatingBed = true
    },
    // 取消占床
    occupationbtn() {
      this.$confirm({
        content: '确定要取消占床吗？',
        title: '确认信息',
        okFn: res => {
          const params = {
            occupationId: this.occupationId,
            bedNo: this.occupybedNo
          }
          unUsedOccupationBed(params).then(res => {
            if (res.data.code === 200) {
              if (res.data.data) {
                this.$message.success('取消占床成功')
                this.occupationId = ''
                this.occupybedNo = ''
                this.openMent()
              } else {
                this.$message.error('取消占床失败')
                this.occupationId = ''
                this.occupybedNo = ''
              }
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        cancelFn: res => {
          console.log('取消')
        }
      })
    },
    // 占床
    usedBedBtn() {
      this.ManualInputVisible = true
    },
    resetForm() {
      this.ManualInputVisible = false
      this.$refs.bedForm.resetFields()
    },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          const params = { ...this.bedForm }
          const arr = params.deptCode.split('-')
          const arr1 = params.nurseCellCode.split('-')
          const arr2 = params.subscribeDoctCode.split('-')
          params.deptName = arr[1]
          params.deptCode = arr[0]
          params.nurseCellName = arr1[1]
          params.nurseCellCode = arr1[0]
          params.subscribeDoctCode = arr2[0]
          params.subscribeDoctName = arr2[1]
          insertOccupationBed(params).then(res => {
            if (res.data.code === 200) {
              this.$message.success(res.data.data)
              this.resetForm()
              this.openMent()
            } else {
              this.$message.error(res.data.message)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    btn1() {},
    rightClick(MouseEvent, item) {
      console.log(item)
      var menu
      if (item.isHisConfirm === '1') {
        this.userBed = false
        this.usedBed = false
        this.bedinfo =
          item.deptName +
          item.nurseCellName +
          '(' +
          item.roomNo +
          ')' +
          item.name +
          '号床' +
          item.patinetName
        this.deptNameinfo = item.deptName
        if (item.isNotChange === '0') {
          this.rightClibox = true
          this.deptValue =
            item.deptCode + '-' + item.deptName + '-' + item.sdeptCode
          this.changeBedpatientName = item.patinetName
          this.changeBedpatientId = item.inpatientNo
          this.menuVisible = true
          menu = document.querySelector('#menu')
          if (MouseEvent.screenX < 100) {
            menu.style.left = MouseEvent.clientX + 'px'
            menu.style.top = MouseEvent.clientY + 'px'
          }
          if (MouseEvent.screenX > 100) {
            menu.style.left = MouseEvent.clientX + 4 + 'px'
            menu.style.top = MouseEvent.clientY + 7 + 'px'
          }
          document.addEventListener('click', this.foo)
        } else {
          this.deptCodeR = item.deptCode
          this.deptValue =
            item.deptCode + '-' + item.deptName + '-' + item.sdeptCode
          this.rightClibox = false
          this.changeBedpatientName = item.patinetName
          this.changeBedpatientId = item.inpatientNo
          this.menuVisible = true
          menu = document.querySelector('#menu')
          if (MouseEvent.screenX < 100) {
            menu.style.left = MouseEvent.clientX + 'px'
            menu.style.top = MouseEvent.clientY + 'px'
          }
          if (MouseEvent.screenX > 100) {
            menu.style.left = MouseEvent.clientX + 4 + 'px'
            menu.style.top = MouseEvent.clientY + 7 + 'px'
          }
          document.addEventListener('click', this.foo)
        }
      } else {
        // 占床
        if (item.occupationState === '0') {
          this.usedBed = false
          this.userBed = true
          this.occupationId = item.occupationId
          this.occupybedNo = item.bedNo
          this.menuVisible = true
          menu = document.querySelector('#menu')
          if (MouseEvent.screenX < 100) {
            menu.style.left = MouseEvent.clientX + 'px'
            menu.style.top = MouseEvent.clientY + 'px'
          }
          if (MouseEvent.screenX > 100) {
            menu.style.left = MouseEvent.clientX + 4 + 'px'
            menu.style.top = MouseEvent.clientY + 7 + 'px'
          }
          document.addEventListener('click', this.foo)
        } else if (item.ifGy === '1' && item.bedState === 'b') {
          this.usedBed = true
          this.menuVisible = true
          this.userBed = false
          this.bedForm.bedNo = item.bedNo
          menu = document.querySelector('#menu')
          if (MouseEvent.screenX < 100) {
            menu.style.left = MouseEvent.clientX + 'px'
            menu.style.top = MouseEvent.clientY + 'px'
          }
          if (MouseEvent.screenX > 100) {
            menu.style.left = MouseEvent.clientX + 4 + 'px'
            menu.style.top = MouseEvent.clientY + 7 + 'px'
          }
          document.addEventListener('click', this.foo)
        }
      }
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuVisible = false
      document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
    },
    format(percentage) {
      return percentage === 100 ? '100' : `${percentage}`
    },
    handleFun() {},

    pageChange(page) {},
    handlerEidt(row) {
      this.dialogVisible = true
    },
    handlerDetail(row) {
      this.drawerVisible = true
    },
    handerSearch(val) {},
    // 重置
    handlerReset() {
      this.ruleForm = {
        deptCode: '',
        nurseCellCode: ''
      }
      this.bedType = ['1']
      this.bedStatus = ['1']
    },
    handlerDelete(row) {
      this.$confirm({
        content: '确定要删除该项吗？',
        title: '确认信息',
        okFn: res => {
          console.log(res)
        },
        cancelFn: res => {
          console.log('取消')
        }
      })
    },
    handlerDeleteAll(params) {
      console.log(this.$toast.warning('失败了'))
      // this.$toast.warning("成功了")
    },
    dialogConfirm() {
      console.log('ss')
    },
    getSelectionItems(list) {
      console.log(list)
    },
    // 占床医生
    remoteMethod(val) {
      this.hospitalizationSelect.predoctCodeoptions = []
      const arr = this.bedForm.deptCode.split('-')
      getDoctList({ deptCode: arr[0], name: val }).then(res => {
        if (res.data.code === 200) {
          let dats = {
            label: '',
            value: ''
          }
          res.data.data.forEach(element => {
            dats = {
              label: element.name,
              value: element.id + '-' + element.name
            }
            this.hospitalizationSelect.predoctCodeoptions.push(dats)
          })
        }
      })
    },
    // 占床根据科室查病区
    beddeptChange(val, areaCode) {
      this.bedForm.subscribeDoctCode = ''
      this.hospitalizationSelect.inpatientAreaoptions = []
      this.hospitalizationSelect.predoctCodeoptions = []
      const arr = this.bedForm.deptCode.split('-')
      getPatientAreaDTO({ deptCode: arr[0], areaCode: areaCode }).then(res => {
        if (res.data.code === 200) {
          let dats = {
            label: '',
            value: ''
          }
          res.data.data.forEach(element => {
            dats = {
              label: element.areaName,
              value: element.areaId + '-' + element.areaName
            }
            this.hospitalizationSelect.inpatientAreaoptions.push(dats)
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.drawer-warp {
  height: 100%;
}
.form-item {
  min-width: 280px;
  height: 28px;
  margin-bottom: 30px;
}
.department-box {
  padding: 12px 11px 10px 10px;
  box-sizing: border-box;
  display: flex;
  // justify-content: space-between;
  // overflow: hidden;
  overflow-y: auto;
  height: 100%;
  flex-wrap: wrap;
  flex: 1;
}
.form-bed {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 21px 0 0 29px;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
  p {
    margin-right: 45px;
    margin-bottom: 26px;
    .bed-title {
      margin-right: 10px;
    }
  }
}
.drawer-box {
  padding-top: 15px;
  p {
    width: 100%;
    height: 40px;
    background-color: #f4f8fb;
    color: #555555;
    font-size: 16px;
    line-height: 40px;
    padding-left: 15px;
    box-sizing: border-box;
  }
  .box-information {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    padding: 23px 0px 23px 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    .basic-box {
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      color: #555555;
      div {
        width: 240px;
        // height: 33px;
        line-height: 33px;
        font-size: 14px;
        margin-right: 12px;
      }
    }
    .more-text {
      width: 100px;
      position: absolute;
      right: 10px;
      bottom: 20px;
      color: rgba(24, 144, 255, 100);
      cursor: pointer;
      font-size: 14px;
    }
  }
  .demo-ruleForm {
    box-sizing: border-box;
    padding: 15px 18px 0 11px;
    .formitem {
      display: flex;
      justify-content: space-between;
    }
    /deep/ .el-form-item__error {
      padding: 0 !important;
    }
    .el-form-item {
      margin-bottom: 10px !important;
    }
    /deep/ .el-form-item__label {
      color: #555555 !important;
    }
  }
  .el-table /deep/.cell {
    font-size: 14px !important;
  }
  .el-button /deep/ span {
    font-size: 14px !important;
  }
}
.surebtn {
  position: absolute;
  right: 9%;
  bottom: 7%;
  width: 17px;
  display: inline-block;
  height: 17px;
  border: 1px solid #62a3fd;
  border-radius: 50%;
  background-color: #62a3fd;
}
.surebtn1 {
  position: absolute;
  right: 9%;
  bottom: 7%;
  width: 17px;
  display: inline-block;
  height: 17px;
  border: 1px solid rgb(220, 223, 230);
  border-radius: 50%;
}
.seximg {
  width: 15px;
  height: 15px;
  margin-right: 7px;
  display: inline-block;
}
.seximg img {
  width: 15px;
  height: 15px;
}
.outpatient-department {
  width: 50px;
  height: 24px;
  background: #37c0cd;
  border: 1px solid #37c0cd;
  color: #ffffff;
  line-height: 24px;
  display: inline-block;
  border-radius: 4px;
  margin-right: 10px;
  text-align: center;
}
.youxian {
  width: 50px;
  height: 24px;
  background: #fc6161;
  border: 1px solid #fc6161;
  color: #ffffff;
  line-height: 24px;
  display: inline-block;
  border-radius: 4px;
  margin-right: 10px;
  text-align: center;
}
.no-craatperpro {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  top: 60px;
  left: 0;
  background-color: #fff;
}
.stayinbed-name {
  width: 50px;
  text-align: center;
  height: 24px;
  display: inline-block;
  line-height: 24px;
  background: #ddebff;
  color: #2b80ff;
  border: 1px solid #2b80ff;
  border-radius: 4px;
}
.register {
  padding: 7px 10px;
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  background-color: #f5b923;
  color: #ffffff;
  border-radius: 5px;
  margin-top: 10px;
}
.informationbox {
  width: 280px;
  margin: 5px auto;
  padding: 12px 5px 10px 15px;
  box-sizing: border-box;
  // cursor: pointer;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 3px 3px 0px 0px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.06);
  position: relative;
}
.view-patients {
  height: 46px;
  background: #f4f8fb;
  border: 1px solid #e7ecf8;
  color: #555555;
  padding: 16px 16px 14px 18px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    font-size: 16px;
  }
}
.patients-content {
  height: 161px;
  padding: 21px 0 0 18px;
  box-sizing: border-box;
  line-height: 20px;
  color: #555555;
  p {
    font-size: 14px;
    margin-bottom: 19px;
  }
}
.emergency-treatment {
  width: 50px;
  height: 24px;
  display: inline-block;
  background: #ffa712;
  border: 1px solid #f5b923;
  color: #ffffff;
  border-radius: 4px;
  margin-right: 10px;
  text-align: center;
}
.right-patients {
  flex: 0 0 300px;
  // width: 300px;
  display: flex;
  height: calc(100% - 0px);
  background: #ffffff;
  flex-direction: column;
  margin-left: 12px;
  padding-bottom: 20px;
  box-sizing: border-box;
  position: relative;
  background-color: #fff;
  border-left: 10px solid #f0f2f5;
}
.neir-patients {
  width: 100%;
  height: calc(100% - 24px);
  overflow-y: auto;
  padding-bottom: 10px;
  box-sizing: border-box;
}
.content-collection {
  flex: 1;
  display: flex;
  background: #fff;
  height: calc(100% - 0px);
  overflow-y: hidden;
}
.left {
  width: 40px;
  background-color: #2b80ff;
  color: #fff;
  font-size: 20px;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 40px;
}
.status-img {
  margin-right: 10px;
}
.room-status {
  height: 30px;
  text-align: right;
}
#durgbox {
  line-height: 46px;
  width: 159px;
  height: 46px;
  opacity: 0.9;
  border-radius: 3px;
  font-size: 16px;
  margin-bottom: 6px;
  background-color: #fff;
  border: 2px dashed yellow;
  position: absolute;
  z-index: 99999;
  padding-inline-start: 0px;
}
.bed-img {
  width: 30px;
  height: 18px;
}
.house-num {
  border-radius: 3px;
  font-size: 16px;
  height: 40px;
  width: 100%;
  line-height: 40px;
  text-align: center;
}
// 颜色归类
.one-span {
  color: #4090ff;
  border-color: #4090ff;
  background-color: #f1f7ff;
}
.two-span {
  color: #fb7c75;
  border-color: #fb7c75;
  background-color: #fef3f2;
}
.one-div {
  color: #ffffff;
  background-color: #71acfd;
}
.two-div {
  color: #ffffff;
  background-color: #b0d1fe;
}
// 灰色
.three-div {
  color: #555555;
  background-color: #f3f2f2;
}
.four-div {
  color: #ffffff;
  background-color: #fc9691;
}
.five-div {
  color: #ffffff;
  background-color: #fdbdba;
}
// 颜色归类
.room-num {
  font-size: 21px;
  text-align: center;
}
.ment-name {
  text-align: center;
  padding-top: 3px;
  box-sizing: border-box;
}
.medical-name {
  text-align: center;
  padding-top: 3px;
  font-size: 12px;
}
.ment-state {
  display: inline-block;
  width: 45px;
  height: 22px;
  line-height: 20px;
  text-align: center;
  background: #ffffff;
  border: 1px dashed;
  border-radius: 5px;
}
.ment-box {
  width: 100%;
  height: 113px;
  display: flex;
  justify-content: space-between;
}
.ment-position1 {
  border: 3px dashed #ffd905 !important;
  box-sizing: border-box;
}
.no-ment-position1 {
  border: none;
}
.ment-position {
  width: 110px;
  height: 110px;
  opacity: 0.9;
  border-radius: 3px;
  font-size: 16px;
  cursor: pointer;
  margin-right: 12px;
  position: relative;
}
.ment-position:last-of-type{
  margin-right: 0;
}
.department-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: 10px;
}
.ment {
  height: 150px;
  opacity: 1;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 6px;
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  margin: 0 15px 14px 0;
  box-sizing: border-box;
}
.ck-filter-form {
  display: flex;
  align-items: top;
  overflow: hidden;
  .form-item-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .form-item {
      display: flex;
      align-items: center;
      width: 295px;
      margin: 3px;
      margin-right: 15px;
      margin-bottom: 10px;
      .form-item-label {
        color: #909399;
        text-align: right;
        white-space: nowrap;
      }
    }
  }
  .right-btn-container {
    text-align: center;
    display: flex;
    padding-top: 5px;
    .form-item-btn {
      margin: 0px 3px;
    }
    .more-text {
      display: block;
      width: 50px;
      margin-top: 6px;
      color: #2165f9;
      cursor: pointer;
      user-select: none;
    }
  }
}
.neti-surbtn {
  width: 5px;
  height: 10px;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 3px 0;
  transform: rotate(45deg);
  position: absolute;
  top: 1px;
  left: 5px;
}
.surbtn-neti {
  width: 0px;
  height: 0px;
  border-color: #fff;
  border-style: solid;
  border-width: 0 0px 0px 0;
  transform: rotate(45deg);
  position: absolute;
  top: 1px;
  left: 5px;
}
</style>
<style lang="less">
.el-radio__inner {
  width: 17px;
  height: 17px;
}
.form-item-label {
  color: #909399;
  text-align: right;
  font-size: 16px;
  white-space: nowrap;
}
.menu__item {
  display: block;
  height: 43px;
  line-height: 43px;
  text-align: center;
  font-size: 14px;
  color: #555555;
  cursor: pointer;
}

.menu__item1 {
  display: block;
  height: 43px;
  line-height: 43px;
  text-align: center;
  font-size: 14px;
  color: #555555;
  cursor: not-allowed;
}

.menu {
  height: 90px;
  width: 90px;
  position: absolute;
  z-index: 99999;
  padding-inline-start: 0px;
  border-radius: 5px;
  box-shadow: 0px 3px 7px 0px rgba(199, 199, 199, 0.35);
  border: 1px solid #eeeeee;
  background-color: #ffffff;
}
.up-left-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid orchid;
  transform: rotate(-46deg);
  margin-left: -19px;
  margin-top: -5px;
  color: #555;
  // top: 3;
}
.date-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid khaki;
  transform: rotate(-46deg);
  margin-left: -19px;
  margin-top: -5px;
  color: #555;
}
.no-w {
  position: absolute;
  width: 0;
  height: 0;
  margin-top: -2px;
}
</style>
